@import "m_reset.scss";
@import url(https://at.alicdn.com/t/c/font_3598588_2n3kql876bs.css);

@function getvw($w){
    @return ($w/750)*100+vw;
}

.wrap{
    // width: getvw(750);
    // box-sizing: border-box;
    header{
       
        nav{
            box-sizing: border-box;
            display: flex;
            padding: getvw(17) getvw(23) getvw(9) getvw(23);
            align-items: center;
            justify-content: space-between;
            width: 100%;
            overflow: hidden;
            .logo{
                width: getvw(123);
                height: getvw(123);
            }
            .search{
                position: relative;
                input{
                    width: getvw(265);
                    height: getvw(50);
                    border: 1px solid #ff9344;
                    border-radius: getvw(50);
                    font-size: getvw(24);
                    padding: 0 getvw(25);
                }
                i{
                    font-size: getvw(30);
                    color:#ff9344;
                    position: absolute;
                    right: getvw(24);
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            .area{
                position: relative;
                select{
                    width: getvw(160);
                    height: getvw(55);
                    border: 1px solid #ff9344;
                    appearance: none;
                    padding-left: getvw(14);
                }
                i{
                    font-size: getvw(30);
                    color:#ff9344;
                    position: absolute;
                    right: getvw(11);
                    top: 50%;
                    transform: translateY(-50%);
                    pointer-events: none;
                }
            }
        }
        .banner{
            overflow: hidden;
            width: 100%;
            ul{
                display: flex;
                animation: banner 3s infinite;
                li{
                    flex-shrink: 0;
                    width: 100%;
                    img{
                        width: 100%;
                    display: block;
                    }
                }
            }
            
            
            @keyframes banner {
               0%{
                transform: translateX(0);
               }
                50%{
                    transform: translateX(getvw(-750));
                }
                100%{
                    transform: translateX(getvw(-1500));
                }
            }
        }
        
    }
    main{
        margin-top:getvw(15) ;
        .top{
            
            padding: getvw(20);
          
            .title{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                    display: flex;
                    align-items: center;
                img{
                    width: getvw(55);
                }
                p{
                    text-indent: getvw(8);
                }
                }
                .right{
                        display: flex;
                        align-items: center;
                        p{
                            margin-right: getvw(8);
                        }
                        i{
                            color: #ff9344;
                        }
                }
            }
            .bottom{
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                
                .newsBox{
                    // flex-shrink: 0;
                    width: getvw(240);
                    height: getvw(95);
                    background-color: pink;
                    margin: getvw(15) getvw(50);
                }
            }
        }
        .bottom{
          
            .title{
                padding: getvw(20);
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                    display: flex;
                    align-items: center;
                i{
                    color: #ff9344;
                    font-size: getvw(55);
                }
                p{
                    text-indent: getvw(8);
                }
                }
                .right{
                    display: flex;
                    align-items: center;
                    p{
                        margin-right: getvw(8);
                    }
                    i{
                        color: #ff9344;
                    }
                    }
            }
            .guess{
                
                .guessBox{
                 
                padding: getvw(15);
                a{ width: 100%;
                    display: flex;
                    box-sizing: border-box;
                    color: #000;
                    .left{
                        flex-shrink: 0;
                        width: getvw(210);
                        height: getvw(160);
                    }
                    .right{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        padding-top: getvw(20);
                        margin-left: getvw(20);
                        height:getvw(125);
                        div:nth-of-type(1){
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            font-size: getvw(30);
                            
                            span:first-child{
                             
                                font-weight: bold;
                            }
                            span:last-child{
                                font-size: getvw(22);
                                color: #494949;
                            }
                        }
                        div:nth-of-type(2){
                            font-size: getvw(22);
                            color: #494949;
                        }
                        div:nth-of-type(3){
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            color: #ff9344;
                            span{
                                font-size: getvw(22);
                                color: #494949;
                            }
                        }
                    }
                }
                }
            }

        }
       
    }
    footer{
       width: 100%;
        position: sticky;
        bottom: 0;
        background-color: #fff;
        height: getvw(120);
        display: flex;
        flex-direction: column;
        justify-content: center;
       
        ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 getvw(23);
            li{
                display: flex;
                flex-direction: column;
               
                .box{
                    text-align: center;
                    i{
                        color: #ff9344;
                        font-size: getvw(60);
                    }
                    p{
                        font-size: getvw(26);
                        color: #000;
                    }
                }
            }

        }
    }
}